<template>
  <div class="level">
    <h1>医院</h1>
    <div class="content">
      <div class="left v-link hospital">等级：</div>
      <ul class="v-link">
        <li :class="{active:activeFlag===''}" @click="changeLevel('')">全部</li>
        <li v-for="(level) in levelArr" :key="level.value" @click="changeLevel(level.value)" :class="{active:activeFlag==level.value}">{{ level.name }}</li>
      </ul>
    </div>
  </div>
</template>
    
<script lang="ts" setup>
import { onMounted,ref } from "vue"
// @ts-ignore
import {reqHospitalLevelAndRegion} from "@/api/home"
// @ts-ignore
import {HospitalLevelAndRegionResponseData,HospitalLevelAndRegionArr} from "@/api/home/type"
let $emits=defineEmits(['getLevel'])
// 定义一个数组存储医院等级的数据
let levelArr=ref<HospitalLevelAndRegionArr>([])
// 控制医院等级高粱响应式数据
let activeFlag=ref<string>('')
//切换高亮显示的回调
const changeLevel=(level:string)=>{
  activeFlag.value=level
  $emits('getLevel',level)
}
// 获取医院等级的数据
const getLevel=async()=>{
  let result:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('Hostype')
  if(result.code===200){
    levelArr.value=result.data
  }
}

onMounted(()=>{
  getLevel()
})
</script>
    
<style lang="scss" scoped>
.v-link {
  color: #666;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.level {
  h1 {
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 16px;
    color: #333;
    letter-spacing: 1px;
  }
  .content {
    display: flex;
    margin-bottom: 10px;
    .left {
      color: #999;
      font-size: 14px;
      margin-bottom: 10px;
      &.hospital {
        width: 60px;
      }
      &.address {
        width: 80px;
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        color: #666;
        margin-right: 26px;
        font-size: 14px;
        margin-bottom: 10px;

        &.active {
          color: #4490f1;
          font-weight: 700;
        }
      }
      li:hover {
        color: #4490f1;
        font-weight: 700;
      }
    }
  }
}
</style>